<template>
  <div class="message-box">
    <div id="message"></div>
    <div @click="showDialog">点击出现弹框</div>
    <el-input ref="input"></el-input>
    <vue-key></vue-key>
  </div>
</template>
<script>
import Vue from 'vue';
import Demo from './demo.vue';
import { isVdom } from '../utils/vdom';
import MessageDialog2 from '../../components/element-ui/src/message-box/src/main';
import VueKey from './vueKey.vue';
const defaults = {
  title: null,
  message: '',
  type: '',
  iconClass: '',
  showInput: false,
  showClose: true,
  modalFade: true,
  lockScroll: true,
  closeOnClickModal: true,
  closeOnPressEscape: true,
  closeOnHashChange: true,
  inputValue: null,
  inputPlaceholder: '',
  inputType: 'text',
  inputPattern: null,
  inputValidator: null,
  inputErrorMessage: '',
  showConfirmButton: true,
  showCancelButton: false,
  confirmButtonPosition: 'right',
  confirmButtonHighlight: false,
  cancelButtonHighlight: false,
  confirmButtonText: '',
  cancelButtonText: '',
  confirmButtonClass: '',
  cancelButtonClass: '',
  customClass: '',
  beforeClose: null,
  dangerouslyUseHTMLString: false,
  center: false,
  roundButton: false,
  distinguishCancelAndClose: false
};
let messageBoxConstructor, instance, currentMsg;
let msgQueue = [];
messageBoxConstructor = Vue.extend(Demo);
function MessageBox(options) {
  console.log(options);
  return new Promise(function(resolve, reject) {
    msgQueue.push({
      options: Object.assign({}, defaults, options),
      resolve,
      reject
    });
    showMsg();
  });
}
function defaultCallback(action, instance) {
  let type = instance.$type;
  if (currentMsg) {
    if (action === 'confirm') {
      if (currentMsg.resolve) {
        if (type === 'prompt') {
          currentMsg.resolve({
            value: instance.inputValue
          });
        } else {
          currentMsg.resolve();
        }
      }
    } else if (action === 'cancel') {
      if (currentMsg.reject) {
        currentMsg.reject();
      }
    }
  }
}
function initInstance() {
  instance = new messageBoxConstructor().$mount();
  console.log(instance);
  instance.callback = defaultCallback;
}
function showMsg() {
  if (!instance) {
    initInstance();
  }

  if (!instance.visible) {
    if (msgQueue.length > 0) {
      currentMsg = msgQueue.shift();
      let options = currentMsg.options;
      if (options.callback === undefined) {
        instance.callback = defaultCallback;
      }
      for (let prop in options) {
        instance[prop] = options[prop];
      }
      if (isVdom(instance.message)) {
        console.log(instance.message);
        instance.$slots.default = [instance.message];
        instance.message = '';
      }
      let oldcb = instance.callback;
      instance.callback = function(action, instance) {
        oldcb(action, instance);
      };
      document.body.appendChild(instance.$el);

      Vue.nextTick(() => {
        instance.visible = true;
      });
    }
  }
}
MessageBox.confirm = function(title, message, options) {
  if (typeof title === 'object') {
    options = title;
    title = '';
  } else if (title === undefined) {
    title = '';
  }
  return MessageBox(
    Object.assign(
      {
        title: title,
        message,
        $type: 'confirm',
        showCancelButton: true
      },
      options
    )
  );
};
MessageBox.alert = function(title, message, options) {
  if (typeof title === 'object') {
    options = title;
    title = '';
  } else if (title === undefined) {
    title = '';
  }

  return MessageBox(
    Object.assign(
      {
        title: title,
        message,
        $type: 'alert',
        showCancelButton: false
      },
      options
    )
  );
};
MessageBox.prompt = function(title, message, options) {
  if (typeof title === 'object') {
    options = title;
    title = '';
  } else if (title === undefined) {
    title = '';
  }

  return MessageBox(
    Object.assign(
      {
        title: title,
        message,
        $type: 'prompt',
        showInput: true,
        showCancelButton: true
      },
      options
    )
  );
};

export default {
  data() {
    return {};
  },
  mounted() {
    this.$refs.input.focus();
  },
  methods: {
    showDialog() {
      const h = this.$createElement;
      MessageDialog2.prompt('请输入邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      })
        .then(({ value }) => {
          console.log(value);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
    },
    fn() {
      console.log('fn回调');
    }
  },
  components: {
    VueKey
  }
};
</script>
<style lang="scss" scoped></style>
